<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico">
  <link rel="mask-icon" href="/images/favicon.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"remove","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":"false;","trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
<meta name="description" content="打开一个网页，整个过程会使用哪些协议？">
<meta property="og:type" content="article">
<meta property="og:title" content="在浏览器中输入 url 地址，按下回车后发生了什么">
<meta property="og:url" content="http://example.com/2021/11/02/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BE%93%E5%85%A5URL/index.html">
<meta property="og:site_name" content="ADGai&#39;s Blog">
<meta property="og:description" content="打开一个网页，整个过程会使用哪些协议？">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/AD-Gai-Code/pic-go/raw/master/202110251645623.jpeg">
<meta property="og:image" content="https://gitee.com/AD-Gai-Code/pic-go/raw/master/202110251638419.png">
<meta property="article:published_time" content="2021-11-02T00:44:09.229Z">
<meta property="article:modified_time" content="2021-11-02T01:06:17.456Z">
<meta property="article:author" content="AiLaodu">
<meta property="article:tag" content="计算机网">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/AD-Gai-Code/pic-go/raw/master/202110251645623.jpeg">


<link rel="canonical" href="http://example.com/2021/11/02/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BE%93%E5%85%A5URL/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://example.com/2021/11/02/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BE%93%E5%85%A5URL/","path":"2021/11/02/在浏览器中输入URL/","title":"在浏览器中输入 url 地址，按下回车后发生了什么"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>在浏览器中输入 url 地址，按下回车后发生了什么 | ADGai's Blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">ADGai's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container"></div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container">
  <div class="algolia-stats"><hr></div>
  <div class="algolia-hits"></div>
  <div class="algolia-pagination"></div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/11/02/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BE%93%E5%85%A5URL/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="AiLaodu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="ADGai's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          在浏览器中输入 url 地址，按下回车后发生了什么
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>
      

      <time title="创建时间：2021-11-02 08:44:09 / 修改时间：09:06:17" itemprop="dateCreated datePublished" datetime="2021-11-02T08:44:09+08:00">2021-11-02</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91/" itemprop="url" rel="index"><span itemprop="name">计算机网</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="打开一个网页，整个过程会使用哪些协议？"><a href="#打开一个网页，整个过程会使用哪些协议？" class="headerlink" title="打开一个网页，整个过程会使用哪些协议？"></a>打开一个网页，整个过程会使用哪些协议？</h2><span id="more"></span>

<p><img src="https://gitee.com/AD-Gai-Code/pic-go/raw/master/202110251645623.jpeg" alt="img">总体来说分为以下几个过程:</p>
<ol>
<li><code>DNS</code> 解析</li>
<li><code>TCP</code> 连接(三次握手)</li>
<li>发送 <code>HTTP</code> 请求(通过<code>TCP</code>套接字发送)</li>
<li>服务器处理请求并返回 <code>HTTP</code> 报文</li>
<li>浏览器解析渲染页面</li>
<li>连接结束(四次挥手)</li>
</ol>
<h2 id="1-DNS-解析"><a href="#1-DNS-解析" class="headerlink" title="1.DNS 解析"></a>1.<code>DNS</code> 解析</h2><p>NS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如<code>www.baidu.com</code>，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的<code>IP</code>地址，但是<code>IP</code>地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到<code>IP</code>地址的转换，这个过程就是<code>DNS</code>解析。它实际上充当了一个翻译的角色，实现了网址到<code>IP</code>地址的转换。网址到<code>IP</code>地址转换的过程是如何进行的?</p>
<h3 id="1-1-解析过程"><a href="#1-1-解析过程" class="headerlink" title="1.1 解析过程"></a>1.1 解析过程</h3><p><code>DNS</code>解析是一个递归查询的过程。</p>
<p><img src="https://gitee.com/AD-Gai-Code/pic-go/raw/master/202110251638419.png" alt="DNS解析过程"></p>
<p>上述图片是查找<code>www.google.com</code>的<code>IP</code>地址过程。首先在本地域名服务器中查询<code>IP</code>地址，如果没有找到的情况下，本地域名服务器会向根域名服务器发送一个请求，如果根域名服务器也不存在该域名时，本地域名会向<code>com</code>顶级域名服务器发送一个请求，依次类推下去。直到最后本地域名服务器得到<code>google</code>的<code>IP</code>地址并把它缓存到本地，供下次查询使用。从上述过程中，可以看出网址的解析是一个从右向左的过程: <code>com -&gt; google.com -&gt; www.google.com</code>。但是你是否发现少了点什么，根域名服务器的解析过程呢？事实上，真正的网址是<code>www.google.com.</code>，并不是我多打了一个<code>.</code>，这个<code>.</code>对应的就是根域名服务器，默认情况下所有的网址的最后一位都是<code>.</code>，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求<code>DNS</code>的时候会自动加上，所有网址真正的解析过程为: <code>. -&gt; .com -&gt; google.com. -&gt; www.google.com.</code>。</p>
<h3 id="1-2-DNS-优化"><a href="#1-2-DNS-优化" class="headerlink" title="1.2 DNS 优化"></a>1.2 DNS 优化</h3><p>了解了<code>DNS</code>的过程，可以为我们带来哪些？上文中请求到<code>google</code>的<code>IP</code>地址时，经历了8个步骤，这个过程中存在多个请求(大多数情况下 <code>DNS</code> 使用 <code>UDP</code> 进行传输，这就要求域名解析器和域名服务器都必须自己处理超时和重传从而保证可靠性。)。如果每次都经过这么多步骤，是否太耗时间？如何减少该过程的步骤呢？那就是<code>DNS</code>缓存。</p>
<h4 id="1-2-1-DNS-缓存"><a href="#1-2-1-DNS-缓存" class="headerlink" title="1.2.1 DNS 缓存"></a>1.2.1 DNS 缓存</h4><p><code>DNS</code>存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，<code>IPS</code>服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。</p>
<h4 id="1-2-2-DNS-负载均衡"><a href="#1-2-2-DNS-负载均衡" class="headerlink" title="1.2.2 DNS 负载均衡"></a>1.2.2 DNS 负载均衡</h4><p>首先思考一个问题：<code>DNS</code>返回的<code>IP</code>地址是否每次都一样？如果每次都一样是否说明你请求的资源都位于同一台机器上面，那么这台机器需要多高的性能和储存才能满足亿万请求呢？其实真实的互联网世界背后存在成千上百台服务器，大型的网站甚至更多。但是在用户的眼中，它需要的只是处理他的请求，哪台机器处理请求并不重要。<code>DNS</code>可以返回一个合适的机器的<code>IP</code>给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是<code>DNS</code>负载均衡，又叫做<code>DNS</code>重定向。</p>
<h2 id="2-TCP-连接"><a href="#2-TCP-连接" class="headerlink" title="2. TCP 连接"></a>2. TCP 连接</h2><p>HTTP 是基于 TCP 协议传输的,客户端与服务器通过三次握手建立起 TCP 连接，具体过程可参考：<a target="_blank" rel="noopener" href="https://ad-gai-code.github.io/2021/11/02/TCP%E7%9A%84%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B/">TCP的三次握手</a>。</p>
<h2 id="3-发送-HTTP-请求-前端-HTTP"><a href="#3-发送-HTTP-请求-前端-HTTP" class="headerlink" title="3. 发送 HTTP 请求(前端 HTTP)"></a>3. 发送 HTTP 请求(前端 HTTP)</h2><p>建立了TCP连接之后，发起一个<code>http</code>请求,发送<code>HTTP</code>请求的过程就是构建<code>HTTP</code>请求报文并通过TCP协议中发送到服务器指定端口(<code>HTTP</code>协议<code>80/8080</code>, <code>HTTPS</code>协议<code>443</code>)。<code>HTTP</code>请求报文是由三部分组成: <strong>请求行</strong>, <strong>请求报头</strong>和<strong>请求正文</strong>。</p>
<h3 id="3-1-请求行"><a href="#3-1-请求行" class="headerlink" title="3.1 请求行"></a>3.1 请求行</h3><p>格式如下:<br><code>Method Request-URL HTTP-Version CRLF</code></p>
<figure class="highlight http"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">eg</span><span class="punctuation">: </span>GET index.html HTTP/1.1</span><br></pre></td></tr></table></figure>

<p>常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。</p>
<h4 id="3-1-1-Get-和-POST-有什么区别？"><a href="#3-1-1-Get-和-POST-有什么区别？" class="headerlink" title="3.1.1 Get 和 POST 有什么区别？"></a>3.1.1 Get 和 POST 有什么区别？</h4><ol>
<li><p><code>Http</code>报文层面：</p>
<ul>
<li><code>GET</code>请求信息放在<code>URL</code>，<code>POST</code>放在报文体中</li>
<li><code>GET</code>请求中一般浏览器对<code>URL</code>长度有限制；<code>POST</code>请求数据长度无限制</li>
</ul>
</li>
<li><p>数据库层面：</p>
<ul>
<li><code>GET</code>服务幂等性（对数据库的一次操作和多次操作上一致的）和安全性（没有改变数据库的数据）</li>
<li><code>POST</code>不符合幂等性和安全性</li>
</ul>
</li>
<li><p>其他层面：</p>
<ul>
<li><code>GET</code>可以被缓存，被存储，而<code>POST</code>不行</li>
<li><code>GET</code>请求的内容会被保存在浏览器中</li>
<li>超过90%的<code>GET</code>请求都被<code>CDN(Content Delivery Network)</code>缓存了，大大减少<code>web</code>服务起器的负担</li>
</ul>
</li>
</ol>
<h3 id="3-2-请求报头"><a href="#3-2-请求报头" class="headerlink" title="3.2 请求报头"></a>3.2 请求报头</h3><p>请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。</p>
<blockquote>
<p> PS: 客户端不一定特指浏览器，有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。</p>
</blockquote>
<p>常见的请求报头有: <code>Acce pt, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent</code>等。</p>
<ul>
<li><code>Accept</code>用于指定客户端用于接受哪些类型的信息。</li>
<li><code>Accept-Encoding</code>与<code>Accept</code>类似，它用于指定接受的编码方式。</li>
<li><code>Connection</code>设置为<code>Keep-alive</code>用于告诉客户端本次<code>HTTP</code>请求结束之后并不需要关闭<code>TCP</code>连接，这样可以使下次<code>HTTP</code>请求使用相同的<code>TCP</code>通道，节省<code>TCP</code>连接建立的时间。</li>
</ul>
<h3 id="3-3-请求正文"><a href="#3-3-请求正文" class="headerlink" title="3.3 请求正文"></a>3.3 请求正文</h3><p>当使用<code>POST</code>, <code>PUT</code>等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息，例如: 现在的<code>Web</code>应用通常采用<code>Rest</code>架构，请求的数据格式一般为<code>json</code>。这时就需要设置<code>Content-Type: application/json</code>。</p>
<h2 id="4-服务器处理请求并返回HTTP报文-后端-HTTP"><a href="#4-服务器处理请求并返回HTTP报文-后端-HTTP" class="headerlink" title="4. 服务器处理请求并返回HTTP报文(后端 HTTP)"></a>4. 服务器处理请求并返回HTTP报文(后端 HTTP)</h2><p>后端从在固定的端口接收到<code>TCP</code>报文开始，这一部分对应于编程语言中的<code>socket</code>。它会对<code>TCP</code>连接进行处理，对<code>HTTP</code>协议进行解析，并按照报文格式进一步封装成<code>HTTP Request</code>对象，供上层使用。这一部分工作一般是由<code>Web</code>服务器去进行，如<code>Tomcat</code>,<code> Jetty</code>和<code>Netty</code>等等。</p>
<p><code>HTTP</code>响应报文也是由三部分组成: <strong>状态码</strong>, <strong>响应报头</strong>和<strong>响应报文</strong>。</p>
<h3 id="4-1-状态码"><a href="#4-1-状态码" class="headerlink" title="4.1 状态码"></a>4.1 状态码</h3><p>状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:</p>
<ul>
<li><code>1xx</code>：指示信息–表示请求已接收，继续处理。</li>
<li><code>2xx</code>：成功–表示请求已被成功接收、理解、接受。</li>
<li><code>3xx</code>：重定向–要完成请求必须进行更进一步的操作。</li>
<li><code>4xx</code>：客户端错误–请求有语法错误或请求无法实现。</li>
<li><code>5xx</code>：服务器端错误–服务器未能实现合法的请求。</li>
</ul>
<p>平时遇到比较常见的状态码有:</p>
<ul>
<li><code>200 OK</code> :正常返回信息。</li>
<li><code>400 Bad Rqquest</code>：客户端请求有语法错误，不能被服务器理解。</li>
<li><code>401 Unauthorized</code>：请求未经授权，这个状态代码和WWW-Authenticate报头域一起使用。</li>
<li><code>403 Forbidden</code>：服务器收到请求，但是拒绝提供服务。</li>
<li><code>404 Not Found</code>：请求资源不存在，比如输入了错误的URL。</li>
<li><code>500 Internal Server Error</code>：服务器发生了不可预期的错误。</li>
<li><code>503 Server Unavailable</code>：服务器当前不能处理客户端的请求，一段时间后可能恢复正常。</li>
</ul>
<h4 id="4-1-1-301-和-302-有什么区别？"><a href="#4-1-1-301-和-302-有什么区别？" class="headerlink" title="4.1.1  301 和 302 有什么区别？"></a>4.1.1  301 和 302 有什么区别？</h4><p><code>301</code>和<code>302</code>状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的<code>URL</code>地址，这个地址可以从响应的<code>Location</code>首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。</p>
<p>他们的不同在于:</p>
<ul>
<li><code>301</code>表示旧地址<code>A</code>的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址。</li>
<li><code>302</code>表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址<code>A</code>跳转到地址<code>B</code>，搜索引擎会抓取新的内容而保存旧的网址。</li>
</ul>
<h3 id="4-2-响应报头"><a href="#4-2-响应报头" class="headerlink" title="4.2 响应报头"></a>4.2 响应报头</h3><p>常见的响应报头字段有: <code>Server</code>,<code> Connection</code>。</p>
<h3 id="4-3-响应报文"><a href="#4-3-响应报文" class="headerlink" title="4.3 响应报文"></a>4.3 响应报文</h3><p>服务器返回给浏览器的文本信息，通常<code>HTML</code>,<code> CSS</code>,<code> JS</code>, 图片等文件就放在这一部分。</p>
<h2 id="5-浏览器解析渲染页面"><a href="#5-浏览器解析渲染页面" class="headerlink" title="5. 浏览器解析渲染页面"></a>5. 浏览器解析渲染页面</h2><p>客户端浏览器解析HTML内容，这部分暂时没有深入学习。</p>
<h2 id="6-连接结束-四次挥手"><a href="#6-连接结束-四次挥手" class="headerlink" title="6. 连接结束 (四次挥手)"></a>6. 连接结束 (四次挥手)</h2><p>具体过程可参考：<a target="_blank" rel="noopener" href="https://ad-gai-code.github.io/2021/11/02/TCP%E7%9A%84%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/">TCP 的四次挥手</a></p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91/" rel="tag"># 计算机网</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/11/02/TCP%E7%9A%84%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B/" rel="prev" title="TCP的四次挥手">
                  <i class="fa fa-chevron-left"></i> TCP的四次挥手
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2022/02/15/%E9%87%8D%E8%AF%BB%20HashMap%20%E6%BA%90%E7%A0%81%EF%BC%8C%E5%80%BC%E5%BE%97%E4%B8%80%E5%93%81/" rel="next" title="重读 HashMap 源码，值得一品">
                  重读 HashMap 源码，值得一品 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">AiLaodu</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js" integrity="sha256-HWlivbjXc58GuU4EIZziqIE83FFZ/da42de13pGZnMA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.30.2/dist/instantsearch.production.min.js" integrity="sha256-eqhx/eer5fsD7YooSb21wsfJaQkJ/4gF3bmRBZP7q2o=" crossorigin="anonymous"></script><script src="/js/third-party/search/algolia-search.js"></script>





  





</body>
</html>
